<template>
  <headPage></headPage>
  <div style="padding: .05rem">
    <div class="seach-wrap">
      <el-form :inline="true" ref="" :model="paramsInfo" label-width="80px">
        <el-row :span="24">
          <el-col :span="5">
            <el-form-item label="时间">
              <el-date-picker
                  v-model="paramsInfo.crtDate"
                  type="date"
                  placeholder="选择时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="消息">
              <el-input v-model="paramsInfo.message" placeholder="请输入消息"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" v-loading.fullscreen.lock="loading" @click="searchMessage">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="padding: .1rem .2rem">
      <el-table
          :data="messageItems"
          stripe
          :header-cell-style="{background:'#F5F7FA',color:'#333333'}"
          style="width: 100%;"
      >
        <el-table-column
            prop="message"
            label="问题"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="crtUser"
            label="提交人"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="crtDate"
            label="提交时间"
            :formatter="formatterTime"
        >
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            :formatter="statusFormat"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop=""
            label="操作"
            show-overflow-tooltip>
          <template #default="scope">
            <el-button type="primary" v-if="scope.row.status === 1" size="small" @click="handleMessage(scope.row)">处理</el-button>
            <el-button type="primary" size="small" @click="showMessageDetail(scope.row)" >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <MsgComp ref="messageRef"></MsgComp>
</template>

<script>
import { selectLogInfo,findUserListByKey,searchMessage,addMessage,updateMessage } from '@/api/chartdb'
import { ElMessage, ElMessageBox } from 'element-plus'
import consts from '../../common/consts'
import headPage from '../ui/headPage.vue'
import moment from 'moment'
import MsgComp from './MsgComp.vue'

export default {
  name: 'log',
  components: {
    headPage,
    MsgComp
  },
  data(){
    return {
      status_option:consts.status_option,
      status_option_desc:consts.status_option_desc,
      evaluateStatus_desc:consts.evaluateStatus_desc,
      params:{
        crtDate:'',
        message:'',
        startIndex:1,
        pageSize:10,
        totalNum:0,
      },
      paramsInfo:{
        crtDate:'',
        message:'',
      },
      dataItems:[],
      messageItems:[],
      userList:[],
      sessionId:'',
      dialogTableVisible:false,
      dialogEvaluateVisible:false,
      loading:false,
      currErrorItem:{},
    }
  },
  mounted() {
    this.searchMessage();
  },
  methods:{
    searchMessage(){
      let params={
        startIndex: this.params.startIndex,
        pageSize: this.params.pageSize,
        crtDate:this.paramsInfo.crtDate?moment(this.paramsInfo.crtDate).format("YYYYMMDD"):"",
        message:this.paramsInfo.message
      }
      searchMessage(params).then((res) => {
        console.log("res===>", res)
        this.messageItems=res.data.data.records
      })
    },
    statusFormat(row){
      if (row.status == 1){
        return "待处理"
      } else if (row.status == 2){
        return "已处理"
      } else if (row.status == 3){
        return "已关闭"
      }
    },
    formatterTime(row) {
      return moment(row.crtDate).format('YYYY-MM-DD HH:mm:ss')
    },
    showMessageDetail(row){
      this.$refs.messageRef.openDialog(row)
    },
    handleMessage(row){
      ElMessageBox.confirm(
          '问题是否已处理？',
          '提示',
          {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
          }
      ).then(() => {
        let params={
          id: row.id,
          message: row.message,
          status: 2
        }
        updateMessage(params).then((res) => {
          /*console.log("res===>", res)*/
          ElMessage({
            type: 'success',
            message: '问题已处理',
          })
        })

      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '问题待处理',
        })
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.seach-wrap{
  /*height: 0.5rem;*/
  /*display: flex;*/
  /*align-items: center;*/
  /*margin: 0.1rem 0.5rem;*/
  border-bottom: 1px solid #f1f1f1;
  /*justify-content: center;*/
  margin-top: 20px;
}
.el-pagination.is-background .el-pager li{
  margin-bottom: 0px !important;
}
.el-pagination{
  display: flex;
  align-items: center;
  margin-top: 5px;
  justify-content: flex-end;
}

</style>